<template>
	<view class="home-apply">
		<view class="title">
			<image src="../../../static/images/icon/more-ico.png"></image>
		    {{$t('app.homepage.intelligentOperation')}}
		</view>
		<view class="flexRow">
			<main-entry 
				v-for="(item, index) in webviewList" 
				:img="item.img" 
				:bg="item.bg" 
				:title="item.title" 
				:fun="item.fun" 
				:url="item.url"
				:key="index">
			</main-entry>
		</view>
	</view>
</template>

<script>
	import mainEntry from '@/components/menu-entry/main-entry.vue'
	
	export default {
		components: {
			mainEntry
		},
		data() {
			return {
				webviewList:[
					{
						img: '../../../static/images/menu/webview_1.png',
						title: this.$t('app.homepage.windProfile'),
						url: 'http://192.168.14.200/MobileApp/overview',
						fun: 'goWebview'
					},
					{
						img: '../../../static/images/menu/webview_2.png',
						title: this.$t('app.homepage.availability'),
						url: 'http://192.168.14.200/MobileApp/availability',
						fun: 'goWebview'
					},
					{
						img: '../../../static/images/menu/webview_3.png',
						title: this.$t('app.homepage.inefficientUnit'),
						url: 'http://192.168.14.200/MobileApp/Inefficient',
						fun: 'goWebview'
					},
					{
						img: '../../../static/images/menu/webview_4.png',
						title: this.$t('app.homepage.powerPrediction'),
						url: 'http://192.168.14.200/MobileApp/power',
						fun: 'goWebview'
					},
					{
						img: '../../../static/images/menu/webview_5.png',
						title: this.$t('app.homepage.intelligentWarning'),
						url: 'http://192.168.14.200/MobileApp/warn',
						fun: 'goWebview'
					}
				]
			}
		}
	}
</script>

<style lang="scss">
	.home-apply {
		margin-top: 10px;
		background: #fff;
		float: left;
		width: 100%;
		
		>.title {
	        // text-align: center;
			color: #2e6d5d;
			padding: 8px;
			font-size: $uni-font-size-lg;
			font-weight: bold;
			border-bottom: 1px solid #dbe2ef;
			display: flex;
			align-items: center;
			
			image {
				width: 25px;
				height: 25px;
			}
		}
		
		>.flexRow {
			display: flex;
			flex-direction: row;
			flex-wrap: wrap;
			justify-content: flex-start;
			// align-items: center;
		}
	}
</style>
